<template>
    <div class="main-nav">
        <!-- v-if="store.state.router.userData.menuInfo.menuChilds.value!=null"  -->
            <router-link 
            v-for="item of store.state.router.userData.menuInfo" :to="item.menuUrl" custom v-slot="{ navigate }"   >
                <div @click="navigate"  @mousedown="select(item.menuName)" @keypress.enter="navigate" role="link" class="link" :class="[selectedItem==item.menuName?'_active':'']" >{{ item.menuName }}</div>
            </router-link>
            <!-- {
              menuId: 11,
              menuName: "患者库",
              menuUrl: "/treat/patientList",
              componentName:"patientList",
              menuImgClass: '',
              menuChilds: [],
              componentView:"Treat/PatientList"
            }, -->
    </div>
</template>

<script lang="ts">
import { computed, ref } from "vue"
import {useStore} from "vuex"

export default {
    setup (props:any,ctx:any) { 
        const store = useStore() 
        const selectedItem = computed(()=>{
            select(store.state.router.userData.firstMenu)
            return store.state.router.userData.firstMenu
        }
        )
        const select=(str:string)=>{
            let data={
                first:str
            }
            if(store.state.router.userData.firstMenu != str){
                store.state.router.userData.firstMenu = str
            }
            ctx.emit("select",data)
        }

        return {select,store,selectedItem}
    },
    // methods:{
    //     select(str:string){
    //         let data={
    //             first:str
    //         }
    //         // console.log(this);
            
    //         this.$emit("select",data)
    //     }
    // }
}
</script>

<style lang="less" scoped>
    .main-nav{
        display: flex;
        
        
    }
    .link{
            font-size: 16px;
            display: flex;
            align-items: center;
        justify-content: center;
           width: 100px; 
           height: 60px;
           /* outline: 1px solid red; */
        }
        .link:hover{
            background-color: #f7f7f7;
        }
    ._active{
        color: #fff;
        background-color: #00aaff;
    }
    ._active:hover{
        background-color: #00a0f0;
    }
    
</style>